<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../web/dist/css/bootstrap.css">
	<style type="text/css">
	*{margin:0;padding: 0;}
		nav{
			display: block;
			width: 200px;
			margin:20px auto;
		}
		nav #utop{
			text-align: center;
			display: block;
			height: 40px;
			border:1px solid #ccc;
			line-height: 40px;
			border-radius: 5px;
			cursor: pointer;
		}
		#utop:hover{
			background-color: #ccc;
		}
		#list{
			display: none;
			list-style: none;
			border:1px solid #ccc;
			border-radius: 5px;
		}
		#list li{			
			text-align: center;
			line-height: 40px;
			cursor: pointer;
		}
		#list li:hover{
			background-color: #ccc;
		}

	</style>
</head>
<body>
<nav>
	<div id="utop">下拉列表</div>
	<ul id="list">
		<li>First</li>
		<li>Second</li>
		<li>Third</li>
	</ul>
</nav>
</body>
</html>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	//true显示，为block，false不显示，none
	$('utop').onOff=false;
	$('utop').onclick=function(){
		if(this.onOff==false){
			$('list').style.display='block';//$(list)
			this.onOff=true;
		}else{			
			$('list').style.display='none';
			this.onOff=false;
		}
	}
	$('list').onclick=function(){
		for(var i=0;i<$('list').children.length;i++){
			console.log($('list').children[1]);
			$('utop').innerText=$('list').children[i].innerText;
		}
	}
</script>